<template>
  <v-chart
    ref="vChartRef"
    :option="option"
    autoresize
    style="width: 100%; height: 300px"
  ></v-chart>
</template>

<script setup>
import { ref, defineProps, defineExpose } from "vue";
import VChart, { THEME_KEY } from "vue-echarts";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { BarChart } from "echarts/charts";
import {
  DatasetComponent,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  ToolboxComponent,
} from "echarts/components";
// const props = defineProps({
//   themeColor: {
//     type: String || Object || Array,
//     default: 'dark'
//   }
// })
const option = ref({
  grid: {
    left: "10%",
    right: "10%",
    bottom: "10%",
    top: "10%",
    containLabel: true,
  },
  tooltip: {
    show: true,
    trigger: "axis",
    axisPointer: {
      show: true,
      type: "shadow",
    },
  },
  xAxis: {
    show: true,
    type: "category",
    data: [],
  },
  yAxis: {
    show: true,
    type: "value",
  },
  series: [],
});
use([
  DatasetComponent,
  CanvasRenderer,
  BarChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  ToolboxComponent,
]);
const setData = (data) => {
  option.value = {
    title: {
      text: data.title,
      left: "center",
      top: 5,
    },

    grid: {
      left: "5%",
      right: "5%",
      bottom: "5%",
      top: "12%",
      containLabel: true,
    },
    tooltip: {
      show: true,
      trigger: "axis",
      axisPointer: {
        show: true,
        type: "shadow",
      },
    },
    xAxis: {
      show: true,
      type: "category",
      data: data.yAxis,
      axisLabel: {
        // inside: true, // 标签刻度朝内
        margin: 10, // 清除默认间距
        padding: [0, 10, 0, 0], // 右边内边距10
        outerWidth: 100,
        // textStyle: {
        //   // align: "right", // 文字右对齐
        // },
        //此处是重点实现文字实现换行以及过长...
        formatter: function (params) {
          var newParamsName = "";
          var paramsNameNumber = params.length;
          var provideNumber = 5; //一行显示几个字
          var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
          if (paramsNameNumber > provideNumber) {
            //两行展示
            for (var p = 0; p < 2; p++) {
              var tempStr = "";
              var start = p * provideNumber;
              var end = start + provideNumber;
              if (p == rowNumber - 1) {
                tempStr = params.substring(start, paramsNameNumber);
              } else {
                tempStr = params.substring(start, end) + "\n";
              }
              newParamsName += tempStr;
            }
            //换行时....
            newParamsName =
              newParamsName.substring(0, newParamsName.length - 1) +
              "..." +
              " ";
          } else {
            newParamsName = params;
          }
          //调取生成浮窗的函数
          return newParamsName;
        },
      },
    },
    yAxis: {
      show: true,
      type: "value",
    },

    backgroundColor: "#ffffff",
    series: [
      {
        name: "",
        type: "bar",
        data: data.data,
        // itemStyle: {
        //   //通常情况下：
        //   normal: {
        //     color: function (params) {
        //       var colorList = [
        //         "rgb(42,170,227)",
        //         "rgb(234,220,38)",
        //         "rgb(255, 36, 36)",
        //         "rgb(83, 240, 35)",
        //       ];
        //       return colorList[params.dataIndex];
        //     },
        //   },
        //   //鼠标悬停时：
        //   emphasis: {
        //     shadowBlur: 10,
        //     shadowOffsetX: 0,
        //     shadowColor: "rgba(0, 0, 0, 0.5)",
        //   },
        // },
      },
    ],
  };
};
defineExpose({
  setData,
});
</script>
